<template>
  <view class="car1">
    <view class="select">
      <uv-picker
        ref="picker"
        :columns="addressList"
        :loading="loading"
        keyName="name"
        @change="change"
        @confirm="confirm"
      >
      </uv-picker>
      <view @click="open" class="dizhi"
        >{{ dizhi }}<uv-icon name="arrow-down" size="14"></uv-icon
      ></view>
      <!-- <button @click="open">打开</button> -->
      <uv-search
        placeholder="请输入您的搜索的内容"
        shape="round"
        :showAction="false"
      ></uv-search>
    </view>
    <view class="car1-box1">
      <view class="box1-top">
        <view class="font">添加爱车 <text>享专属服务</text></view>
        <view class="btn" @click="addcar()">添加爱车</view>
      </view>
      <view class="box1-center">
        <view class="center-content" v-for="item in list" :key="item.id">
          <image :src="item.img"></image>
          <view class="font">{{ item.title }}</view>
        </view>
      </view>
      <view class="box1-bottom">
        <view class="bottom-left">
          <image src="/static/优惠券.png"></image>
          <view class="font"> 您有<text>2</text>张工时费抵扣券待使用 </view>
        </view>
        <view class="bottom-right">
          <image src="/static/carlist-right.png"></image>
        </view>
      </view>
    </view>
    <view class="car1-box2">
      <view class="border"></view>
      <view class="center">
        <view class="center-left">
          <image src="/static/礼物.png"></image>
        </view>
        <view class="center-right"> 新人专享 </view>
      </view>
      <view class="border"></view>
    </view>
    <view class="car1-box3">
      <business1></business1>
      <business1></business1>
      <business1></business1>
      <business1></business1>
      <business1></business1>
    </view>
    <view class="car1-box4">
      <uv-popup ref="popup" mode="center" @change="change" round="10">
        <view style="width: 80%; margin: auto; padding: 40rpx;text-align: center;">
          <uv-icon name="close" @click="close" color="#c4c4c4" size="24" style="display: flex; margin-bottom: 20rpx; justify-content: right"></uv-icon>
          <text>当前地区没有服务商，请重新选择您的位置</text>
          <button class="btn" @click="close">确定</button>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script>
import business1 from "../../components/business1.vue";
export default {
  components: {
    business1,
  },
  data() {
    return {
      loading: true,
      provinces: [], //省
      citys: [], //市
      areas: [], //区
      pickerValue: [0, 0, 0],
      defaultValue: [3442, 1, 2],
      dizhi: "泰安市",
      list: [
        { id: 1, img: "/static/机油.png", title: "做保养" },
        { id: 2, img: "/static/轮胎.png", title: "换轮胎" },
        { id: 3, img: "/static/跑车.png", title: "汽车服务" },
        { id: 4, img: "/static/汽车.png", title: "汽车美容" },
      ],
      contentList: [
        {
          name: "推荐",
        },
        {
          name: "小保养",
        },
        {
          name: "保养搭配推荐",
        },
        {
          name: "制动系统",
        },
        {
          name: "冷却系统",
        },
      ],
    };
  },
  methods: {
    addcar(){
      uni.navigateTo({
        url:'/pages/car1/addcar'
      })
    },
    getData() {
      uni.request({
        method: "GET",
        url: "/static/regions.json",
        success: (res) => {
          const { statusCode, data } = res;
          if (statusCode === 200) {
            console.log("获取的数据：", res);
            // this.dizhi = res.data.value.name
            this.provinces = data.sort((left, right) =>
              Number(left.code) > Number(right.code) ? 1 : -1
            );
            console.log(this.provinces);
            this.handlePickValueDefault();
            setTimeout(() => {
              this.loading = false;
            }, 200);
          }
        },
      });
    },
    handlePickValueDefault() {
      // 设置省
      this.pickerValue[0] = this.provinces.findIndex(
        (item) => Number(item.id) === this.defaultValue[0]
      );
      // 设置市
      this.citys = this.provinces[this.pickerValue[0]]?.children || [];
      this.pickerValue[1] = this.citys.findIndex(
        (item) => Number(item.id) === this.defaultValue[1]
      );
      // 设置区
      this.areas = this.citys[this.pickerValue[1]]?.children || [];
      this.pickerValue[2] = this.areas.findIndex(
        (item) => Number(item.id) === this.defaultValue[2]
      );
      // 重置下位置
      this.$refs.picker.setIndexs(
        [this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],
        true
      );
    },
    change(e) {
      if (this.loading) return;
      console.log(e);
      const { columnIndex, index, indexs } = e;
      // 改变了省
      if (columnIndex === 0) {
        this.citys = this.provinces[index]?.children || [];
        this.areas = this.citys[0]?.children || [];
        this.$refs.picker.setIndexs([index, 0, 0], true);
      } else if (columnIndex === 1) {
        this.areas = this.citys[index]?.children || [];
        this.$refs.picker.setIndexs(indexs, true);
      }
    },
    open() {
      // this.$refs.picker.open();
      // this.handlePickValueDefault();
      console.log(123);
      this.$refs.popup.open();
    },
    close(){
      this.$refs.popup.close();
    },
    confirm(e) {
      console.log("确认选择的地区：", e);
      this.dizhi = e.value[2].name;
      // uni.showToast({
      //   icon: "none",
      //   title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`,
      // });
    },
  },
  created() {
    this.getData();
  },
  computed: {
    addressList() {
      return [this.provinces, this.citys, this.areas];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.car1 {
  height: 400rpx;
  background: linear-gradient(#fc4424, #f99482, #f5e7e5);
  .select {
    display: flex;
    width: 90%;
    margin: auto;
    background-color: #f5f5f5;
    border-radius: 50px;
    .dizhi {
      padding: 16rpx;
      display: flex;
      align-items: center;
    }
  }
  .car1-box1 {
    width: 90%;
    margin: auto;
    margin-top: 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .box1-top {
      padding: 20rpx;
      display: flex;
      background-color: #ffeae7;
      align-items: center;
      justify-content: space-between;
      color: #fc3a19;
      .font {
        text {
          color: #000;
        }
      }
      .btn {
        width: 150rpx;
        text-align: center;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        border: 1px solid red;
        color: #fff;
        border-radius: 20rpx;
        background-color: #fc4424;
      }
    }
    .box1-center {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding-top: 40rpx;
      padding-bottom: 40rpx;
      align-content: center;
      background-color: #fff;
      .center-content {
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    .box1-bottom {
      display: flex;
      background-color: #fff;
      justify-content: space-between;
      padding: 20rpx;
      align-items: center;
      image {
        height: 40rpx;
        width: 40rpx;
      }
      .bottom-left {
        display: flex;
        .font {
          margin-left: 10rpx;
          text {
            color: #fc4424;
            padding: 5rpx;
          }
        }
      }
    }
  }
  .car1-box2 {
    width: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 80rpx;
    line-height: 80rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .border {
      width: 20%;
      border-bottom: 4rpx solid #fc4424;
    }
    .center {
      display: flex;
      height: 40rpx;
      line-height: 40rpx;
      color: #fc4424;
      font-weight: bold;
      .center-right {
        margin-left: 10rpx;
      }
    }
  }
  .car1-box3 {
    width: 90%;
    margin: auto;
  }
  .car1-box4{
    .btn{
      background-color: #f7433d;
      color: #fff;
      margin-top: 40rpx;
      border-radius: 50px;
    }
  }
}
</style>
